<template>
  <div style="padding: 10px">
    <el-table :data="tableData"   stripe style="width: 100%">
      <!--      <el-table-column fixed prop="id" sortable label="ID" width="150"/>-->
      <el-table-column label="封面" width="120">
        <template #default="scope">
          <el-image
              style="width: 100px;height: 100px"
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="carPartsName" label="汽车配件名称" width="120"/>
      <el-table-column prop="standard" label="规格" width="120"/>
      <el-table-column prop="carNumber" label="配件编号" width="120"/>
      <!--      <el-table-column prop="buy_price" label="进价" width="120"/>-->
      <el-table-column prop="sale_price" label="价格" width="120"/>
      <!--      <el-table-column prop="sub_number" label="缺货数量" width="120"/>-->
      <el-table-column  label="数量" width="120">
        <template #default="scope">
          <el-button @click="jianshao(scope.row)">-</el-button>
          {{scope.row.buy_number}}
          <el-button @click="zengjia(scope.row)">+</el-button>
        </template>
      </el-table-column>
      <el-table-column  label="小计" width="140">
        <template #default="scope">
          {{scope.row.sale_price*scope.row.buy_number}}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-popconfirm title="确认删除?" @confirm="handleDelete(scope.row)">
            <template #reference>
              <el-button type="text">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div>&nbsp;</div>
    <view >&nbsp;&nbsp;共计：{{sum_price}}元</view>
    <view>
      &nbsp;    &nbsp; &nbsp;<el-button type="primary" @click="pay">结算</el-button>
    </view>
  </div>

</template>
<script>
import request from "@/utils/request";
import {View} from "@element-plus/icons-vue";

export default {
  name: "My_Cart",
  components: {View},
  data(){
    let sum_price=0;
    let userId=JSON.parse(sessionStorage.getItem("user")).id;
    return {
      userId,
      tableData: [],
      sum_price,
    }
  },
  created() {

    this.load()
  },
  methods:{
    pay(){
      if(this.tableData.length==0){
        this.$message({
          type:'error',
          message:"购物车空空如也~"
        })
        return
      }else{
        let time=new Date();
        console.log(time.getTime())
        let OrderId="G"+time.getFullYear()+time.getMonth()+time.getDay()+time.getHours()+time.getMinutes()+time.getSeconds()+time.getMilliseconds();
        OrderId.substring(0,15)
        console.log(OrderId)
        console.log(this.tableData[0].carPartsName)
        for (let i=0;i<this.tableData.length;i++){
          let order_detail={
            "carPartsName": this.tableData[i].carPartsName,
            "standard" :this.tableData[i].standard,
            "carNumber": this.tableData[i].carNumber,
            "buy_number": this.tableData[i].buy_number,
            "price": this.tableData[i].sale_price,
            "orderId": OrderId,
            "user_id": this.tableData[i].user_id,
            "have_number":this.tableData[i].buy_number
          }
          request.post("/order_detail/save",order_detail).then(res=>{
            console.log(res);
          })
        }
        let order_form={
          "orderId":OrderId,
          "flag":0,
          "userId":this.userId,
        }
        console.log(this.userId)
        request.post("/order_form/save",order_form).then(res=>{
          console.log(res)
        })
        this.$message({
          type:"success",
          message:"下单成功！"
        })
        request.delete("/buy_detail/deleteAll/"+this.userId).then(res=>{
          console.log(res)
          this.load()
        })
      }

    },
    load() {
      let u=sessionStorage.getItem("user");
      let user=JSON.parse(u);
      request.get("/buy_detail/"+user.id).then(res => {
        console.log(res)
        this.tableData = res.data
        this.totalprice();
      })

    },
    totalprice(){
      this.sum_price=0
      for(let i=0;i<this.tableData.length;i++){
        this.sum_price+=this.tableData[i].buy_number*this.tableData[i].sale_price
      }
    },
    jianshao(row){
      if(row.buy_number===0){
        this.$message({
          type:"error",
          message:"不能再减少啦"
        })
        return
      }else{
        row.buy_number-=1;
        this.totalprice();
      }
    },
    zengjia(row){
      row.buy_number+=1;
      this.totalprice();
    },
    handleDelete(row) {
      let u=sessionStorage.getItem("user");
      let user=JSON.parse(u);
      request.delete("/buy_detail/"+user.id+"/"+row.carNumber).then(res=>{
        console.log(res)
        this.load();
        this.$message({
          type:"success",
          message:"删除成功"
        })
      })

    }
  }


}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

</style>
